import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {getRealSize} from '../utils';
import PropTypes from 'prop-types';
import FastImage from 'react-native-fast-image';
import {Touchable} from '../utils';
import ThemeStyles from '../styles';
import Button from './button';

export default class EmptyBox extends React.Component {
  static propTypes = {
    styles: PropTypes.object,
    label: PropTypes.string,
    onRefresh: PropTypes.func,
  };
  static defaultProps = {styles: {}, label: '', onRefresh: () => {}};
  render() {
    const {color, label, onRefresh} = this.props;
    return (
      <View style={[Styles.container, this.props.styles]}>
        <View>
          <FastImage
            style={{width: 200, height: 200}}
            source={{
              uri: 'https://unsplash.it/400/400?image=1',
              priority: FastImage.priority.normal,
            }}
            resizeMode={FastImage.resizeMode.contain}
          />
          <Text style={[Styles.label, color && {color, borderColor: color}]}>
            {label}
          </Text>
          <Button size="small" />
        </View>
      </View>
    );
  }
}

const Styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1,
    marginTop: getRealSize(98),
  },
  label: {
    borderRadius: getRealSize(2),
    paddingHorizontal: getRealSize(4),
    // fontSize: getRealSize(10),
    margin: getRealSize(12),
    color: ThemeStyles.Color.text.tintGray,
    textAlign: 'center',
  },
});
